import React, { useEffect, useState, createElement } from 'react'
import { Col, Row, Card, Table } from 'antd'
import * as Icon from '@ant-design/icons'
import { getData } from '../../api'
import MyEcharts from '../../components/Echarts'
import './home.css'

// table列的数据
const colums = [
  {
    title: '课程',
    dataIndex: 'name'
  },
  {
    title: '今日购买',
    dataIndex: 'todayBuy',
  },
  {
    title: '本月购买',
    dataIndex: 'monthBuy',
  },
  {
    title: '总购买',
    dataIndex: 'totalBuy',
  }
]
const countData = [
  {
    name: "今日支付订单",
    value: 1234,
    icon: "CheckCircleOutlined",
    color: "#2ec7c9"
  },
  {
    name: "今日收藏订单",
    value: 2100,
    icon: "ShoppingCartOutlined",
    color: "#ffb980"
  },
  {
    name: "今日未支付订单",
    value: 1234,
    icon: "ExclamationCircleOutlined",
    color: "#5ab1ef"
  },
  {
    name: "本月支付订单",
    value: 1234,
    icon: "CheckCircleOutlined",
    color: "#2ec7c9"
  },
  {
    name: "本月收藏订单",
    value: 2340,
    icon: "ShoppingCartOutlined",
    color: "#ffb980"
  },
  {
    name: "本月未支付订单",
    value: 4334,
    icon: "ExclamationCircleOutlined",
    color: "#5ab1ef"
  }
]

// 图标转化  =>   
  const iconToElement = (name) => createElement(Icon[name])

const Home = () => {
  const userImg = require("../../assets/images/baba.webp")

  // 创建echarts的响应数据
  const [ echartsData, setEchartsData ] = useState({})
   // 定义table数据
  const [tableData, setTableData] = useState([])

  useEffect(() => {
    getData().then(({ data }) => {
      const { tableData, orderData, userData, videoData} = data.data
      setTableData(tableData)

      // 对于echarts数据的组装
      const order = orderData
      // x轴数据
      const xData = order.date
      // series数据组装
      const keyArray = Object.keys(order.data[0])     //传入一个对象，把对象转换成一个数组
      const series = []
      keyArray.forEach(key => {
        series.push({
          name: key,
          data: order.data.map(item => item[key]),
          type: 'line'
        })
      })
      setEchartsData({
        order: {
          xData,
          series
        },
        user: {
          xData: userData.map(item => item.date),
          series: [
            {
              name: '新增用户',
              data: userData.map(item => item.new),
              type: 'bar'
            },
            {
              name: '活跃用户',
              data: userData.map(item => item.active),
              type: 'bar'
            }
          ]
        },
        video: {
          series: [
            {
              data: videoData,
              type: 'pie'
            }
          ]
        }
      })
    })
  }, [])

  return (
    <Row className="home">
      <Col span={8}>
        <Card hoverable className="left-card">
          <div className="user">
            <img src={userImg} alt="大头照"/>
            <div className="userinfo">
              <p className="name">Admin</p>
              <p className="access">超级管理员</p>
            </div>
          </div>
          <div className="login-info">
            <p>上次登录时间：<span>2025-07-07</span></p>
            <p>上次登录地点：<span>芜湖</span></p>
          </div>
        </Card>
        <Card className="left-card">
          <Table rowKey={"name"} columns={colums} dataSource={tableData} pagination={false}/>
        </Card>
      </Col>
      <Col span={16}>
        <div className="num">
          {
            countData.map((item, index) => {
              return (
                <Card key={index}>
                  <div className="icon-box" style={{ background: item.color }}>
                    { iconToElement(item.icon) }
                  </div>
                  <div className="detail">
                    <p className="num">￥{ item.value }</p>
                    <p className="txt">{ item.name }</p>
                  </div>
                </Card>
              )
            })
          }
        </div>
        {/* 因为useState是异步的，可能状态已修改，但是没渲染，所有需要添加错误处理，来判断此刻的echarsData.order是有数据的 */}
        { echartsData.order && <MyEcharts chartData={echartsData.order} style={{height: '280px'}}/> }
        <div className="graph">
          { echartsData.user && <MyEcharts chartData={echartsData.user} style={{height: '240px', width: '50%'}}/> }
          { echartsData.video && <MyEcharts chartData={echartsData.video} isAxisChart={false} style={{height: '240px', width: '50%'}}/> }
        </div>
      </Col>
    </Row>
  )
}

export default Home